import React, { Component } from 'react';
import View from './../view/view.js'
import Popper from 'popper.js'
import PropTypes from 'prop-types';
import './select.scss'
import Input from './../input/input'
export default class Select extends Component {
  constructor (props) {
    super(props)
    this.state = {
      show: false,
      value: ''
    }
    this.inputOnFocus = this.inputOnFocus.bind(this)
    this.inputOnClick = this.inputOnClick.bind(this)
    this.updatePopper = this.updatePopper.bind(this)
    this.createPopper = this.createPopper.bind(this)
    this.beforeEnter = this.beforeEnter.bind(this)
    this.getChildContext = this.getChildContext.bind(this)
    this.clickEventHandle = this.clickEventHandle.bind(this)
  }
  inputOnChange () {}
  inputOnFocus () {
    this.setState({
      show: true
    })
  }
  inputOnClick (e) {
    e.nativeEvent.stopImmediatePropagation();
  }
  updatePopper () {
    this.popper ? this.popper.update() : this.createPopper()
  }
  clickEventHandle () {
    if (this.state.show) {
      this.setState({
        show: false
      })
    }
  }
  createPopper () {
    this.popper = new Popper(this.popperWrapRef, this.popperCtnRef, {
      modifiers: {
        computeStyle: {
          gpuAcceleration: false
        },
        preset: {
          enabled: true,
          fn: data => {
            data.styles.top = this.popperWrapRef.offsetTop + 40
            data.styles.left = this.popperWrapRef.offsetLeft
            data.styles.width = this.popperWrapRef.offsetWidth
            return data
          }
        }
      }
    })
  }
  beforeEnter () {
    this.updatePopper()
  }
  componentDidMount () {
    this.popperWrapRef = this.refs.popperWrapRef
    this.popperCtnRef = this.refs.popperCtnRef
    document.addEventListener('click', this.clickEventHandle)
  }
  componentWillUnmount () {
    this.popper && this.popper.destroy()
    document.removeEventListener('click', this.clickEventHandle)
  }
  getChildContext () {
    return {
      component: this
    }
  }
  setValue (item) {
    this.setState({
      value: item.label
    })
    this.props.onChange(item.value)
  }
  render() {
    return (
      <div>
        <div ref="popperWrapRef" className="popperWrapRef" style={{ width: '200px' }}>
        {/* <input value={this.state.value} onChange={this.inputOnChange} onFocus={this.inputOnFocus} onClick={this.inputOnClick} type="text" /> */}
        <Input value={this.state.value}
        onChange={this.inputOnChange}
        onFocus={this.inputOnFocus}
        ></Input>
        <View
        show={this.state.show}
        name='slide-down'
        beforeEnter={this.beforeEnter}>
            <div ref="popperCtnRef" className="popperCtnRef">
              {this.props.children}
            </div>
        </View>
        </div>
      </div>
    )
  }
}

Select.childContextTypes = { // 定义childContextTypes，getChildContext才能用
  component: PropTypes.any
}